<template>
    <div>
      <el-autocomplete
        v-model="state4"
        :fetch-suggestions="querySearchAsync"
        popper-class=""
        placeholder="请输入内容"
        @select="handleSelect"
      >
        <template slot-scope="props">
          <div>{{props.item.name}}</div>
        </template>
      </el-autocomplete>
      <div>{{state3}}</div>

      <div class="block">
        <span class="demonstration">默认</span>
        <el-date-picker
          v-model="time"
          :readonly='readonly'
          value-format="yyyy-MM-dd"
          type="daterange"
          @change="getTime"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </div>
      {{time}}
      {{time1}}
      {{time2}}
    </div>


</template>

<script>
    export default {
        name: "autoComplete",
      data(){
          return{
            restaurants: [],
            state4: '',
            timeout:  null,
            state3:[],
            time1:'',
            time2:'',
            time:[ "2019-05-27", "2019-06-04" ],
            readonly:true
          }
      },
      methods:{
          getTime(){
           /* let time = []
            time.push(this.time1)
            time.push(this.time2)*/
           this.time1=this.time[0]
            this.time2=this.time[1]
          },
        loadAll() {
          return [{"id":1,"name":"徐强2244","jobType":"DEVELOPER"},{"id":2,"name":"徐强1","jobType":"DEMANDOR"},{"id":3,"name":"徐强122","jobType":"DEVELOPER"}]
        },
        querySearchAsync(queryString, cb) {
          var restaurants = this.restaurants;
          var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

          clearTimeout(this.timeout);
          console.log(results)
          cb(results)
          //return results
          /*this.timeout = setTimeout(() => {
           cb(results);
          }, 500 * Math.random());*/
        },
        createStateFilter(queryString) {
          return (state) => {
            return (state.id.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
          };
        },
        handleSelect(item) {
          this.state3.push(item)
          this.state4=''
        }
      },
      mounted(){
          this.restaurants = this.loadAll()
      }
    }
</script>

<style scoped>

</style>
